<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>Vue-基础 | C·辰</title><meta name="author" content="辰"><meta name="copyright" content="辰"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="Vue渐进式框架">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue-基础">
<meta property="og:url" content="http://example.com/2023/04/05/Vue-%E5%9F%BA%E7%A1%80/index.html">
<meta property="og:site_name" content="C·辰">
<meta property="og:description" content="Vue渐进式框架">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/Vue.jpg">
<meta property="article:published_time" content="2023-04-05T09:07:47.000Z">
<meta property="article:modified_time" content="2023-08-25T13:16:15.311Z">
<meta property="article:author" content="辰">
<meta property="article:tag" content="Vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/Vue.jpg"><link rel="shortcut icon" href="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/Bell.ico"><link rel="canonical" href="http://example.com/2023/04/05/Vue-%E5%9F%BA%E7%A1%80/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  }
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Vue-基础',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-08-25 21:16:15'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog%2Fimages%2Favatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">32</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">28</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">10</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fa fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fa fa-folder-open"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fa fa-folder-open"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> Demo</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/c2c_shop/"><i class="fa-fw fa fa-comments-o"></i><span> 商城</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/Vue.jpg')"><nav id="nav"><span id="blog-info"><a href="/" title="C·辰"><span class="site-name">C·辰</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fa fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fa fa-folder-open"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fa fa-folder-open"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> Demo</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/c2c_shop/"><i class="fa-fw fa fa-comments-o"></i><span> 商城</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue-基础</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-04-05T09:07:47.000Z" title="发表于 2023-04-05 17:07:47">2023-04-05</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-08-25T13:16:15.311Z" title="更新于 2023-08-25 21:16:15">2023-08-25</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/front-end/">front-end</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">6.4k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>29分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue-基础"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="常用指令"><a href="#常用指令" class="headerlink" title="常用指令"></a>常用指令</h1><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- &#123;&#123; data &#125;&#125; --&gt;</span></span><br><span class="line">插值</span><br><span class="line"></span><br><span class="line">bind--		数据绑定:		    v-bind				   		:被绑定对象=”</span><br><span class="line">model--		双向数据绑定：	  	  v-model (默认值为value)		 v-model=&quot;&quot;</span><br><span class="line">on--		点击事件绑定：	      v-on:click=&quot;&quot;     		    @click=&quot;&quot;</span><br><span class="line">if/show      显示标签			v-if=&quot;布尔值&quot; / v-show=&quot;表达式&quot;		if--&gt;删除  show--&gt;隐藏</span><br><span class="line">v-for       循环列表渲染		   v-for=&quot;(value,index) in/of 数组/对象 &quot;</span><br><span class="line">v-text      插入文本--替换控件文本 <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-text</span>=<span class="string">&quot;name&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span>	  --不支持结构解析</span><br><span class="line">v-html      插入文本	<span class="tag">&lt;<span class="name">div</span> <span class="attr">v-html</span>=<span class="string">&quot;&lt;h1&gt;内容&lt;/h1&gt;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span>	--支持内容解析</span><br><span class="line">v-cloak     隐藏未加载数据的符号  隐藏符号搭配style&#123;[cloak]&#123;display:none&#125;&#125;  <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-cloak</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">v-once 		初始渲染后变为静态资源，显示初始值（标签内） <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-once</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">v-pre 		跳过不解析后面的内容（标签内）</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- v-bind  标签内    数据流动单向--data流入页面   --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">v-bind:href</span>=<span class="string">&quot;data&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">:href</span>=<span class="string">&quot;data&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- v-model 标签内    数据流动双向--默认值为value  --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">v-model:href</span>=<span class="string">&quot;data&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model:value</span>=<span class="string">&quot;data&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;data&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- v-on:click=&quot; &quot;     点击事件--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">&quot;add(函数)&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span>   <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;add&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"> methods:&#123;</span><br><span class="line">           add:function()&#123;</span><br><span class="line">           this.num += 5</span><br><span class="line">          &#125;,</span><br><span class="line">            add2(x)&#123;</span><br><span class="line">           &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<hr>
<h1 id="常用语法"><a href="#常用语法" class="headerlink" title="常用语法"></a>常用语法</h1><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 获取当前元素对象的值 --&gt;</span></span><br><span class="line">对象.target.value</span><br><span class="line">showInfo(e)&#123; console.log(e.target.value)&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 写入 --&gt;</span></span><br><span class="line">element.innerText</span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 元素js绑定控件设置点击事件 --&gt;</span></span><br><span class="line">const btn=document.getElementById(&#x27;btn&#x27;)</span><br><span class="line">btn.onclick= () =&gt;&#123;</span><br><span class="line">     <span class="comment">&lt;!-- 创建控件 --&gt;</span></span><br><span class="line">     const input=document.createElement(&#x27;input&#x27;)</span><br><span class="line">     input.className=&#x27;demo&#x27;</span><br><span class="line">     document.body.appendChild(input)</span><br><span class="line">     <span class="comment">&lt;!-- input获取焦点 --&gt;</span></span><br><span class="line">     input.focus()</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 跳转获取cookie值 --&gt;</span></span><br><span class="line">a href=javascript:location.href=&quot;http://www.baidu.com?&quot;+document.cooki</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="常用函数"><a href="#常用函数" class="headerlink" title="常用函数"></a>常用函数</h1><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="title function_">split</span>():拆分字符串 -- data.<span class="title function_">split</span>(<span class="string">&#x27;-&#x27;</span>)</span><br><span class="line"></span><br><span class="line">.<span class="title function_">sort</span>(a,b) --a-b=升序 b-a=降序  arr.<span class="title function_">sort</span>(<span class="function">(<span class="params">a,b</span>)=&gt;</span>&#123; <span class="keyword">return</span> a-b升序/ b-a降序&#125; )   array.<span class="title function_">sort</span>(函数)</span><br><span class="line"></span><br><span class="line">定时器：</span><br><span class="line"><span class="comment">//指定的周期(以毫秒计)来调用函数或计算表达式</span></span><br><span class="line"><span class="built_in">setInterval</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">        <span class="built_in">setInterval</span>( <span class="function">()=&gt;</span>&#123;</span><br><span class="line">            c.<span class="property">opacity</span>=c.<span class="property">opacity</span>-<span class="number">0.01</span></span><br><span class="line">            <span class="keyword">if</span>(c.<span class="property">opacity</span>&lt;=<span class="number">0</span>)c.<span class="property">opacity</span>=<span class="number">1</span></span><br><span class="line">        &#125;,<span class="number">1</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">//指定的毫秒数后调用函数或计算表达式</span></span><br><span class="line">   <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">student</span>.$on(<span class="string">&#x27;chen&#x27;</span>,<span class="variable language_">this</span>.<span class="property">getStudentName</span>)</span><br><span class="line">    &#125;,<span class="number">2000</span>)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="title function_">mounted</span>(<span class="params"></span>)&#123;</span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">timer</span>=<span class="built_in">setInterval</span>(<span class="function">()=&gt;</span>&#123;&#125;,<span class="number">500</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="实例"><a href="#实例" class="headerlink" title="实例"></a>实例</h1><figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">点击事件v-on:click=&quot;me&quot;     methods:&#123;me()&#123;return x&#125;&#125;     也可直接调用里面的函数执行--&#123;&#123;me&#125;&#125;</span><br><span class="line">计算属性--返回自定义内容	  computed:&#123;totle()&#123;return &#125;&#125;	--必须用返回值，返回值被内容使用插值语法输出&#123;&#123;&#125;&#125;</span><br><span class="line">过滤器  				   filters:&#123;timeFormater(value)&#123;return &#125;&#125;	--  &#123;&#123;time  | timeFormater&#125;&#125;  time赋值给timeFormater</span><br><span class="line">自定义指令--directives	  directives：&#123;chen(element,binding)&#123;element.innerText=binding.value<span class="emphasis">*10&#125;&#125; </span></span><br></pre></td></tr></table></figure>

<hr>
<h1 id="生产"><a href="#生产" class="headerlink" title="生产"></a>生产</h1><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">xxxxxxxxxx1 1<span class="keyword">debugger</span>       --断点调试</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="生命周期"><a href="#生命周期" class="headerlink" title="生命周期"></a>生命周期</h1><ul>
<li><strong style="color:blue">vm的生命周期</strong></li>
</ul>
<blockquote>
<p>​	将要创建 &#x3D;&#x3D;&#x3D;&gt;  调用beforeCreate函数。</p>
<p>​	创建完毕 &#x3D;&#x3D;&#x3D;&gt;  调用created函数。</p>
<p>​	捋要挂载 &#x3D;&#x3D;&#x3D;&gt;  调用beforeMount函数。</p>
<p>（重要） 挂载完毕 &#x3D;&#x3D;&#x3D;&gt;  调用mounted函数。      &#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&gt;【重要的钩子&#x2F;定时器】 moutend(){}</p>
<p>​	将要更新 &#x3D;&#x3D;&#x3D;&gt;  调用beforeUpdate函数。</p>
<p>​    更新完毕 &#x3D;&#x3D;&#x3D;&gt;  调用updated函数。</p>
<p>（重要）vm.$destroy() 调用destroyed函数   清楚操作需要放在destroyed函数里面{learInterval(this.timer)}</p>
<p>​	将要销毁 &#x3D;&#x3D;&#x3D;&gt;  调用beforeDestroyi函数。&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&gt;【重要的钩子】  </p>
<p>​	将要销毁 &#x3D;&#x3D;&#x3D;&gt;  调用beforeDestroyi函数。&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&gt;【重要的钩子】</p>
<p>​	销毁完毕 &#x3D;&#x3D;&#x3D;&gt;   调用destroyed函数</p>
</blockquote>
<hr>
<h1 id="script"><a href="#script" class="headerlink" title="script"></a>script</h1><figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;script type=&quot;text/javascript&quot;&gt;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="生产提示"><a href="#生产提示" class="headerlink" title="生产提示"></a>生产提示</h1><figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;script type=&quot;text/javascript&quot;&gt;</span><br><span class="line">     Vue.config.productionTip = false;//设置为 false 以阻止 vue 在启动时生成生产提示。</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="创建实例"><a href="#创建实例" class="headerlink" title="创建实例"></a>创建实例</h1><figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;script type=&quot;text/javascript&quot;&gt;</span><br><span class="line">    // 一个实例对应一个容器</span><br><span class="line">    new Vue(&#123;</span><br><span class="line">        el:&quot;#idName // .ClassName  &quot;,      //el用于当前vue实力为哪个容器服务，值通常为css选择字符串</span><br><span class="line">       //数据存储使用对象，el对应的容器赋值，键值对</span><br><span class="line">        data:&#123;</span><br><span class="line">            str1:&quot;Chen&quot;,</span><br><span class="line">            str2:99,</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="选择器-–el两种写法"><a href="#选择器-–el两种写法" class="headerlink" title="选择器 –el两种写法"></a><strong>选择器 –el两种写法</strong></h1><blockquote>
<p><strong style="color:blue">el：’#idName’   &#x2F;&#x2F;   el:’.ClassName’    </strong></p>
<p>定于实例c后，可在<strong style="color:blue">实例外后绑定元素，c.$mount</strong></p>
<p><strong style="color:blue"><strong>c.$mount(‘#idName’)</strong> </strong>    c.$mount(‘#ClassName’)     </p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;script type=&quot;text/javascript&quot;&gt;</span><br><span class="line">        Vue.config.productionTip = false;//设置为 false 以阻止 vue 在启动时生成生产提示。</span><br><span class="line">        var c=new Vue(&#123;</span><br><span class="line">            el:&quot;#idName&quot;,		//el用于当前vue实力为哪个容器服务，值通常为css选择字符串</span><br><span class="line">            el:document.getElementById(&#x27;idName&#x27;),</span><br><span class="line"></span><br><span class="line">            el:&quot;.className&quot;,</span><br><span class="line">            el:document.getElementsByClassName(&#x27;className&#x27;),</span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line">        c.$mount(&#x27;root&#x27;)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="数据存储–data两种写法"><a href="#数据存储–data两种写法" class="headerlink" title="数据存储–data两种写法"></a>数据存储–data两种写法</h1><ul>
<li><p>一个实例对应一个容器</p>
</li>
<li><p>插值  { { data } }     { { js表达式 } }</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">           &#123;&#123;str1&#125;&#125;</span><br><span class="line">       <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">           <span class="comment">// 一个实例对应一个容器</span></span></span><br><span class="line"><span class="language-javascript">           <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">               <span class="attr">el</span>:<span class="string">&quot;#app&quot;</span>,   </span></span><br><span class="line"><span class="language-javascript">               <span class="attr">data</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                   <span class="attr">str1</span>:<span class="string">&quot;Chen&quot;</span></span></span><br><span class="line"><span class="language-javascript">               &#125;</span></span><br><span class="line"><span class="language-javascript">           &#125;)</span></span><br><span class="line"><span class="language-javascript">           <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">               <span class="attr">el</span>:<span class="string">&#x27;.app2&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">               <span class="comment">//第二种写法：函数式data:function&#123;return&#123;&#125;&#125; 、data()&#123;return&#123;&#125;&#125;</span></span></span><br><span class="line"><span class="language-javascript">               <span class="attr">data</span>:<span class="keyword">function</span>&#123;</span></span><br><span class="line"><span class="language-javascript">                   <span class="keyword">return</span>&#123;</span></span><br><span class="line"><span class="language-javascript">                       <span class="attr">name</span>:<span class="string">&#x27;chen&#x27;</span></span></span><br><span class="line"><span class="language-javascript">                   &#125;</span></span><br><span class="line"><span class="language-javascript">               &#125;</span></span><br><span class="line"><span class="language-javascript">           &#125;&#125;</span></span><br><span class="line"><span class="language-javascript">       </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<hr>
<h1 id="插值语法和指令语法"><a href="#插值语法和指令语法" class="headerlink" title="插值语法和指令语法"></a>插值语法和指令语法</h1><ol>
<li>插值语法 <strong style="color:blue">{ {data_name} }</strong></li>
</ol>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span>  &#123;&#123;str1&#125;&#125;  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span>&gt;</span>  &#123;&#123;data1&#125;&#125;,&#123;&#123;data2&#125;&#125;  &lt;/a</span><br></pre></td></tr></table></figure>

<br/>

<ol start="2">
<li>指令语法</li>
</ol>
<ul>
<li><strong style="color:blue">v-bind:</strong>  标签属性、标签体内容、绑定事件 使用指令语法（数据绑定）</li>
</ul>
<blockquote>
<p> v-bind:被绑定元素&#x3D;”表达式”   					  –  v-bind:href&#x3D;”data2”</p>
<p> v-bind:可被<strong>简写</strong>   :被绑定元素&#x3D;”<strong>表达式</strong>“  	– :href&#x3D;”data2”</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">h1</span>&gt;</span>指令语法：<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">a</span> <span class="attr">v-bind:href</span>=<span class="string">&quot;data2&quot;</span>&gt;</span>哔哩哔哩<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">       <span class="keyword">var</span> chen=<span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">           <span class="attr">el</span>:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">           <span class="attr">data</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">               <span class="attr">data2</span>:<span class="string">&#x27;https://www.bilibili.com/&#x27;</span></span></span><br><span class="line"><span class="language-javascript">           &#125;</span></span><br><span class="line"><span class="language-javascript">       &#125;)</span></span><br><span class="line"><span class="language-javascript">   </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<hr>
<h1 id="数据层级–json方式"><a href="#数据层级–json方式" class="headerlink" title="数据层级–json方式"></a>数据层级–json方式</h1><ul>
<li>数据名重复，可在data设置多个层级<strong>对象</strong>，然后调用</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123;data&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123;value&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123;school.data&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123;school.value&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123;school.chen&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">let</span> c=<span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">el</span>:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">data</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">data</span>:<span class="string">&#x27;数据1&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">value</span>:<span class="string">&#x27;99&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">school</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">data</span>:<span class="string">&#x27;数据1_2&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">value</span>:<span class="number">89</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">chen</span>:<span class="string">&quot;Peng&quot;</span></span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<hr>
<h1 id="数据绑定"><a href="#数据绑定" class="headerlink" title="数据绑定"></a>数据绑定</h1><ul>
<li><p><strong style="color:blue">v-model</strong> 	输入类元素使用–<strong>双向绑定</strong>(input、select等)，默认收集的为<strong>value</strong>值,通过页面修改数据则vm里面对应的数据同时修改</p>
<blockquote>
<p>v-model:value&#x3D;”data”</p>
<p>简写为：<strong>v-model&#x3D;”data”</strong></p>
</blockquote>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model:value</span>=<span class="string">&quot;name&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;name&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<br/>

<ul>
<li><p><strong style="color:blue"> v-bind</strong>        普通标签属性使用–单向绑定,<strong>只能从data流向页面</strong> </p>
<blockquote>
<p>v-bind:被绑定元素&#x3D;”data”  </p>
<p>简写为：**:被绑定元素&#x3D;”data”**</p>
</blockquote>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-bind:value</span>=<span class="string">&quot;name&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">:value</span>=<span class="string">&quot;name&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">:href</span>=<span class="string">&quot;Vue_data&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><br/><br/></p>
<hr>
<h1 id="数据代理–Object-defineProperty方法"><a href="#数据代理–Object-defineProperty方法" class="headerlink" title="数据代理–Object.defineProperty方法"></a>数据代理–Object.defineProperty方法</h1><p><img src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/images%E6%95%B0%E6%8D%AE%E4%BB%A3%E7%90%86.jpg"></p>
<br/>

<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">       let number=19</span><br><span class="line">       let person=&#123;</span><br><span class="line">           name:&#x27;chen&#x27;,</span><br><span class="line">           sex:&#x27;男&#x27;,</span><br><span class="line">       &#125;</span><br><span class="line">       //                    对象     属性</span><br><span class="line">       Object.defineProperty(person,&#x27;age&#x27;,&#123;</span><br><span class="line">           // value:18,</span><br><span class="line">           // enumerable:true,    //控制属性可否可以枚举，默认为false</span><br><span class="line">           // writable:true,      //控制属性可否可以修改, 默认为false</span><br><span class="line">           // configurable:true,  //控制属性可否可以删除, 默认为false</span><br><span class="line"></span><br><span class="line">           //当读取person中的age值时，get:function()&#123;&#125;函数(getter)就会被调用，且返回值就是age的值</span><br><span class="line">           get()&#123;</span><br><span class="line">               console.log(&quot;点击了查询年龄&quot;)</span><br><span class="line">               return number</span><br><span class="line">           &#125;,</span><br><span class="line"></span><br><span class="line">           //当修改person中的age值时，set:function()&#123;&#125;函数(setter)就会被调用，且修改值就是age的值</span><br><span class="line">           set(value)&#123;</span><br><span class="line">               console.log(&quot;修改为固定值&quot;)</span><br><span class="line">               number=value</span><br><span class="line">           &#125;</span><br><span class="line">       &#125;)</span><br><span class="line">       console.log(person)</span><br><span class="line">   &lt;/script&gt;</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="事件处理-methods-–实现点击事件绑定"><a href="#事件处理-methods-–实现点击事件绑定" class="headerlink" title="事件处理(methods)–实现点击事件绑定"></a>事件处理(methods)–实现点击事件绑定</h1><ul>
<li>checkbook使用@change，@click(不推荐)</li>
</ul>
<p>​    1.使用 <strong style="color:green"> v-on : xxx  或   @xxx   </strong> 绑定事件,其中xxx是事件名  <strong>;  v-on:click&#x3D;“函数”     简写： @click&#x3D;”函数”</strong></p>
<p>​    2.事件的何调志要配置在<strong>methods</strong>对象中,最终会在vm:</p>
<p>​    3.methods  中配置的函数,不要用箭头函数!否则this就不是c了:</p>
<p>​    4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象;</p>
<p>​	5.@click&#x3D;”demo”和@click&#x3D;”demo($sevent)”效果一致,但后者可以传参;</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>这是 &#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">&quot;shouInfo1&quot;</span>&gt;</span>点击提示信息(不传参)<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">     <span class="comment">&lt;!--  简写  --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;shouInfo2(99,$event)&quot;</span>&gt;</span>点击提示信息(传参)<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    </span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> c= <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">name</span>:<span class="string">&#x27;辰&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">         &#125;,</span></span><br><span class="line"><span class="language-javascript">         <span class="attr">methods</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">              <span class="comment">// even 为点击对象传过来的值--window自动传的es6</span></span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">shouInfo1</span>(<span class="params">event</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// console.log(event.target.innerText)</span></span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span></span><br><span class="line"><span class="language-javascript">            &#125;,</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">shouInfo2</span>(<span class="params">datac,a</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`传来的值为<span class="subst">$&#123;datac&#125;</span>`</span>)</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">         &#125;</span></span><br><span class="line"><span class="language-javascript">     &#125;)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<hr>
<h1 id="事件修饰符-click-事件修饰符-x3D-”-“"><a href="#事件修饰符-click-事件修饰符-x3D-”-“" class="headerlink" title="事件修饰符-@click.事件修饰符&#x3D;” “"></a>事件修饰符-@click.事件修饰符&#x3D;” “</h1><p>1.<strong style="color:green"><strong>prevent</strong></strong> :阻止默认事件（常用）;</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://www.bilibili.com/&quot;</span> @<span class="attr">click.prevent</span>=<span class="string">&quot;showInfo&quot;</span>&gt;</span>点击提示信息<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>​		<br/></p>
<p>2.<strong style="color:green">**stop **</strong>:阻止事件冒泡（常用 外层控件也有同时点击事件，则内部点击会导致点击事件实现后接着实现外部点击事件–冒泡）</p>
<blockquote>
<p>阻止事件冒泡 @click.stop（外层控件也有同时点击事件，则内部点击会导致全部点击事件实现–冒泡）   只实现被定义的点击事件（2）</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;maopao&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;showInfo1&quot;</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click.stop</span>=<span class="string">&quot;showInfo2&quot;</span>&gt;</span>点击<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>​		<br/></p>
<p>3.<strong style="color:green">once</strong>:事件一局只触发一次（常用);</p>
<blockquote>
<p>once:事件一局只触发一次（常用);</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click.once</span>=<span class="string">&quot;showInfo&quot;</span>&gt;</span>实现只能点击一次<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>​		<br/></p>
<p>4<strong style="color:green">capture</strong>:使用的捕获模式（优先）。等于事件冒泡，点击内部控件想让外部先实现点击事件则外部使用.capture</p>
<blockquote>
<p>capture：使用事件的捕获模式 优先模式（1,2） </p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box1&quot;</span> @<span class="attr">click.capture</span>=<span class="string">&quot;showInfo1&quot;</span>&gt;</span></span><br><span class="line">     div1</span><br><span class="line">     <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;showInfo2&quot;</span>&gt;</span></span><br><span class="line">          div2</span><br><span class="line">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>​		<br/></p>
<p>5.<strong style="color:green">self</strong>:只有event.target是当前操作的元素是才触发事件: </p>
<blockquote>
<p>只有event.target是当前操作的元素是才触发事件</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;demo1&quot;</span> @<span class="attr">click.self</span>=<span class="string">&quot;showInfo2&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;showInfo1&quot;</span>&gt;</span>点击显示1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>​		<br/></p>
<p>6.<strong style="color:green">passive</strong>:事件的默认行为立即执行,无需等待生件回调执行完毕:</p>
<blockquote>
<p>Data_test</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">productionTip</span> = <span class="literal">false</span>;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> c= <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">el</span>:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">data</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">name</span>:<span class="string">&#x27;chen&#x27;</span></span></span><br><span class="line"><span class="language-javascript">             &#125;,</span></span><br><span class="line"><span class="language-javascript">             <span class="attr">methods</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">               <span class="title function_">showInfo1</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                   <span class="title function_">alert</span>(<span class="string">&quot;事件one&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">               &#125;,</span></span><br><span class="line"><span class="language-javascript">               <span class="title function_">showInfo2</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                   <span class="title function_">alert</span>(<span class="string">&quot;事件two&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">               &#125;,</span></span><br><span class="line"><span class="language-javascript">               <span class="title function_">demo</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                   <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;@&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">               &#125;&#125;&#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>​		<br/>		<br/></p>
<hr>
<h1 id="键盘事件"><a href="#键盘事件" class="headerlink" title="键盘事件"></a>键盘事件</h1><ol>
<li><strong>Vue中常用的按键别名</strong></li>
</ol>
<ul>
<li>回车&#x3D;&gt;enter   –13</li>
<li>删除&#x3D;&gt;delete(插获”删除”和退格”键)</li>
<li>退出&#x3D;&gt;esc</li>
<li>空格&#x3D;&gt;space</li>
<li>换行&#x3D;&gt;tab</li>
<li>上&#x3D;&gt;up</li>
<li>下&#x3D;&gt;down</li>
<li>左&#x3D;&gt;left</li>
<li>右&#x3D;&gt;right</li>
</ul>
<p>​	<br/></p>
<ol start="2">
<li>Vue未提供别名的按健，可以使用按健原始的key值去绑定，但注意要转为kebab-case（短横线命名）</li>
</ol>
<p>​	<br/></p>
<ol start="3">
<li>系统修饰键(用法特殊）:ctrl、alt、 shift、 meta</li>
</ol>
<ul>
<li>配合keyup使用:按下修饰键的同时,再按下其他健，随后释放其他键，事件才被触发。</li>
<li>配合keydown使用:正常触发事件</li>
</ul>
<p>​	<br/></p>
<ol start="4">
<li>使用keyCode去指定具体的按键（不推荐)</li>
</ol>
<p>​	<br/></p>
<ol start="5">
<li>自定义键名&#x3D;键码,可以去定制按键别名</li>
</ol>
<ul>
<li>Vue.config.keyCodes.名称&#x3D;键码</li>
</ul>
<p>​	<br/></p>
<p>实操：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;按下回车提示输入内容&quot;</span> @<span class="attr">keydown.enter</span>=<span class="string">&quot;showInfo&quot;</span>&gt;</span>(常用)</span><br><span class="line">        <span class="comment">&lt;!-- 自定义键--huiche==enter(13) --&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;按下回车提示输入内容&quot;</span> @<span class="attr">keydown.huiche</span>=<span class="string">&quot;showInfo&quot;</span>&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;按下回松开后提示输入内容&quot;</span> @<span class="attr">keyup.enter</span>=<span class="string">&quot;showInfo&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">         <span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">productionTip</span> = <span class="literal">false</span>;</span></span><br><span class="line"><span class="language-javascript">         <span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">keyCodes</span>.<span class="property">huiche</span>=<span class="number">13</span>;<span class="comment">//定义键盘键huiche为回车键13</span></span></span><br><span class="line"><span class="language-javascript">             <span class="keyword">var</span> c= <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">                 <span class="attr">el</span>:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                 <span class="attr">data</span>:&#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">                  <span class="attr">methods</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="title function_">showInfo</span>(<span class="params">e</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                        <span class="variable language_">console</span>.<span class="title function_">log</span>(e.<span class="property">target</span>.<span class="property">value</span>)  <span class="comment">//输出元素的值</span></span></span><br><span class="line"><span class="language-javascript">                    &#125;&#125;&#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>​	<br/></p>
<p>​	<br/></p>
<hr>
<h1 id="计算属性-–-computed"><a href="#计算属性-–-computed" class="headerlink" title="计算属性 – computed"></a>计算属性 – computed</h1><p>1.定义要用的属性不存在,要通过原有<strong style="color:green">属性计算得来</strong>。–  <strong style="color:green">computed </strong>（methods格式相同，需要定义get和set方法,需要返回值）</p>
<p>2.原理:底层借助了objcet.defineproperty 方法提供的 <strong>getter和setter.</strong></p>
<p>3.get函数什么时候执行?</p>
<blockquote>
<p>​	(1).初次读取时会执行一次-</p>
<p>​	(2).当依赖的数据发生改变时会被再次调用。</p>
</blockquote>
<p>​	<br/></p>
<p>4.优势:与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。</p>
<p>5.备注:</p>
<blockquote>
<p>​	1.计算属性最终会出现在vm上,直接读取使用即可。</p>
<p>​	2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生</p>
</blockquote>
<p>​	<br/></p>
<ul>
<li>实操：</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">h2</span>&gt;</span>姓名：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span>  <span class="attr">v-model</span>=<span class="string">&quot;data1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">h2</span>&gt;</span>学校：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;data2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">h2</span>&gt;</span>数据：&#123;&#123;allText&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">           <span class="attr">data1</span>:<span class="string">&quot;陈&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">           <span class="attr">data2</span>:<span class="string">&quot;广东东软学院&quot;</span></span></span><br><span class="line"><span class="language-javascript">         &#125;,</span></span><br><span class="line"><span class="language-javascript">             </span></span><br><span class="line"><span class="language-javascript">       <span class="comment">//   计算属性</span></span></span><br><span class="line"><span class="language-javascript">       <span class="attr">computed</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">           <span class="attr">allText</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">               <span class="title function_">get</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                   <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;get被调用&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">                   <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">data1</span>+<span class="string">&#x27;-&#x27;</span>+<span class="variable language_">this</span>.<span class="property">data2</span></span></span><br><span class="line"><span class="language-javascript">               &#125;,</span></span><br><span class="line"><span class="language-javascript">               <span class="comment">//一般只读不改</span></span></span><br><span class="line"><span class="language-javascript">               <span class="title function_">set</span>(<span class="params">value</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                       <span class="keyword">const</span> arry=value.<span class="title function_">split</span>(<span class="string">&#x27;-&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">                       <span class="variable language_">this</span>.<span class="property">data1</span>=arry[<span class="number">0</span>]</span></span><br><span class="line"><span class="language-javascript">                       <span class="variable language_">this</span>.<span class="property">data2</span>=arry[<span class="number">1</span>]</span></span><br><span class="line"><span class="language-javascript">               &#125;&#125; &#125;</span></span><br><span class="line"><span class="language-javascript">        </span></span><br><span class="line"><span class="language-javascript">        </span></span><br><span class="line"><span class="language-javascript">      <span class="comment">//   计算属性--简写--只读模式</span></span></span><br><span class="line"><span class="language-javascript">       <span class="attr">computed</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">           <span class="title function_">allText</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">               <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;get被调用&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">               <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">data1</span>+<span class="string">&#x27;-&#x27;</span>+<span class="variable language_">this</span>.<span class="property">data2</span></span></span><br><span class="line"><span class="language-javascript">           &#125;</span></span><br><span class="line"><span class="language-javascript">           &#125;</span></span><br><span class="line"><span class="language-javascript">     &#125;)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>​	<br/></p>
<p>​	<br/></p>
<hr>
<h1 id="监视属性-–-watch"><a href="#监视属性-–-watch" class="headerlink" title="监视属性 – watch"></a>监视属性 – watch</h1><ol>
<li>当被监视的属性变化时,回调的数自动调用,进行相关操作</li>
<li>监视的属性必须存在,才能进行监视!!</li>
<li>监视的两种写法:</li>
</ol>
<blockquote>
<p> (1).new Vue时传入<strong style="color:green">watch配置</strong><br>    (2).通过<strong style="color:green">vm.$watch</strong>监视</p>
</blockquote>
<ul>
<li>数据项</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">data</span>:&#123;</span><br><span class="line">         <span class="attr">isHot</span>:<span class="literal">true</span>,</span><br><span class="line">         <span class="attr">numbers</span>:&#123;</span><br><span class="line">               <span class="attr">a</span>:<span class="number">1</span>,<span class="attr">b</span>:<span class="number">2</span> &#125;</span><br><span class="line">     &#125;,js</span><br></pre></td></tr></table></figure>

<p>​	<br/></p>
<h2 id="普通监视"><a href="#普通监视" class="headerlink" title="普通监视"></a>普通监视</h2><ul>
<li><p>Vue默认不监测对象内部值的改变（默认监测一层）</p>
</li>
<li><p>watch里面编写数据项 </p>
</li>
<li><p><strong>immediate:true</strong>,初始化时调用handler</p>
</li>
</ul>
<blockquote>
<p>当数值 Data(isHot) 发送改变的时候被调用* <em>handler(newValue,oldValue)</em>* 方法进行监视输出改变情况</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">watch</span>:&#123;</span><br><span class="line">     <span class="attr">isHot</span>:&#123;</span><br><span class="line">          <span class="attr">immediate</span>:<span class="literal">true</span>,</span><br><span class="line">          <span class="title function_">handler</span>(<span class="params">newValue,oldValue</span>)&#123;</span><br><span class="line">               <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`isHot被修改了,新值为：<span class="subst">$&#123;newValue&#125;</span>   旧值为：<span class="subst">$&#123;oldValue&#125;</span>`</span>)</span><br><span class="line">     &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<p>​	<br/></p>
<h2 id="深度监视"><a href="#深度监视" class="headerlink" title="深度监视"></a>深度监视</h2><ul>
<li><strong>deep:ture</strong> ：开启深度监视</li>
</ul>
<blockquote>
<p>多层数据改变也会被监测到内部值的改变（多层）</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">numbers</span>:&#123;</span><br><span class="line">     <span class="attr">deep</span>:ture,</span><br><span class="line">     <span class="title function_">handler</span>(<span class="params"></span>)&#123;</span><br><span class="line">     	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;numbers改变了&#x27;</span>)</span><br><span class="line">     &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<br/>

<blockquote>
<p>简写和实例外定义监视</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 监视简写</span></span><br><span class="line">       <span class="title function_">numbers1</span>(<span class="params">newValue,oldValue</span>)&#123;</span><br><span class="line">                <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;numbers改变了&#x27;</span>)</span><br><span class="line">               &#125;,     </span><br><span class="line">             &#125;</span><br><span class="line">         &#125;)</span><br><span class="line">        </span><br><span class="line">    <span class="comment">//   实例外监视写法</span></span><br><span class="line">       c.$wath(<span class="string">&#x27;isHot&#x27;</span>,&#123;</span><br><span class="line">                 <span class="attr">immediate</span>:<span class="literal">true</span>,</span><br><span class="line">                 <span class="title function_">handler</span>(<span class="params">newValue,oldValue</span>)&#123;</span><br><span class="line">                   &#125;&#125;)</span><br></pre></td></tr></table></figure>

<p><br/><br/></p>
<hr>
<h1 id="动态类名和样式"><a href="#动态类名和样式" class="headerlink" title="动态类名和样式"></a>动态类名和样式</h1><ul>
<li>使用 <strong>v-bind</strong> 写入类名&#x2F;样式</li>
</ul>
<blockquote>
<p>可将 数组 、对象 、表达式 、数组中的对象  写入标签的类名</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;rootb&quot;</span> <span class="attr">v-bind:class</span>=<span class="string">&quot;data1&quot;</span>&gt;</span>1<span class="tag">&lt;/<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"> <span class="comment">&lt;!-- 数组 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;rootc&quot;</span> <span class="attr">:class</span>=<span class="string">&quot;classArr&quot;</span>&gt;</span>2<span class="tag">&lt;/<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"> <span class="comment">&lt;!-- 对象 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;rootd&quot;</span> <span class="attr">:class</span>=<span class="string">&quot;classObj&quot;</span>&gt;</span>3<span class="tag">&lt;/<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"> <span class="comment">&lt;!-- 数组 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;roote&quot;</span> <span class="attr">:style</span>=<span class="string">&quot;[styleObj,styleObj2]&quot;</span>&gt;</span>4<span class="tag">&lt;/<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"> <span class="comment">&lt;!-- 数组中存在对象 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;rootf&quot;</span> <span class="attr">:style</span>=<span class="string">&quot;styleArr&quot;</span>&gt;</span>5<span class="tag">&lt;/<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br></pre></td></tr></table></figure>

<br/>

<blockquote>
<p>数据源</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">productionTip</span> = <span class="literal">false</span>;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> c= <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">el</span>:<span class="string">&#x27;#roota&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">data</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">data1</span>:<span class="string">&#x27;chen&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">classArr</span>:[<span class="string">&#x27;a&#x27;</span>,<span class="string">&#x27;b&#x27;</span>,<span class="string">&#x27;c&#x27;</span>],</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">classObj</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">chen1</span>:<span class="literal">false</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">chen2</span>:<span class="literal">true</span>,</span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">styleObj</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">fontSize</span>:<span class="string">&#x27;50px&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">color</span>:<span class="string">&#x27;blue&#x27;</span></span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">styleObj2</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">backgroundColor</span>:<span class="string">&#x27;blue&#x27;</span></span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">styleArr</span>:[</span></span><br><span class="line"><span class="language-javascript">                    &#123;</span></span><br><span class="line"><span class="language-javascript">                        <span class="attr">fontSize</span>:<span class="string">&#x27;50px&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                        <span class="attr">color</span>:<span class="string">&#x27;red&#x27;</span></span></span><br><span class="line"><span class="language-javascript">                    &#125;,</span></span><br><span class="line"><span class="language-javascript">                    &#123;</span></span><br><span class="line"><span class="language-javascript">                        <span class="attr">backgroundColor</span>:<span class="string">&#x27;blue&#x27;</span></span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">                ]</span></span><br><span class="line"><span class="language-javascript">             &#125;</span></span><br><span class="line"><span class="language-javascript">         &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<br/>

<br/>

<hr>
<h1 id="条件渲染-–-show-x2F-if"><a href="#条件渲染-–-show-x2F-if" class="headerlink" title="条件渲染 – show &#x2F; if"></a>条件渲染 – show &#x2F; if</h1><p>v-if 和v-show都是来控制标签是否显示，但是也有区别，v-show是对样式层面的控制，v-if是对dom节点的控制。</p>
<ul>
<li><strong style="color:green">删除渲染</strong>：v-if的值为false时,整个节点会被浏览器删除,涉及到DOM操作</li>
<li>v-if和v-else(相当于if else)两个标签之间不要有其他标签,否则条件判断不成立</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">&quot;true&quot;</span>&gt;</span>显示if<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">&quot;false&quot;</span>&gt;</span>隐藏<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">&quot;data1==1&quot;</span>&gt;</span>条件判断--显示/隐藏<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-else-if</span>=<span class="string">&quot;data1==2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-else</span>&gt;</span>chen<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<br/>

<ul>
<li>v-show的值为false,相当于display:none,只是隐藏并没有删除其节点</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"> <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">     <span class="comment">&lt;!-- v-show   隐藏--&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-show</span>=<span class="string">&quot;true&quot;</span>&gt;</span>显示<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-show</span>=<span class="string">&quot;false&quot;</span>&gt;</span>隐藏<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-show</span>=<span class="string">&quot;1==2&quot;</span>&gt;</span>条件判断--显示/隐藏<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<br/>

<br/>

<hr>
<h1 id="列表渲染-–-for"><a href="#列表渲染-–-for" class="headerlink" title="列表渲染 – .for"></a>列表渲染 – .for</h1><p><strong style="color:green">v-for</strong></p>
<ul>
<li>v-for&#x3D;”(value,key) in 数组&#x2F;对象”</li>
</ul>
<br/>

<ul>
<li>语法:v-for&#x3D;”(item,index) in xxx” : key&#x3D;”yyy”</li>
</ul>
<blockquote>
<p>item是临时变量,表示数组里面每一个元素,xxx是数组名</p>
</blockquote>
<br/>

<ul>
<li>可遍历:数组、对象、字符串（用的很少)、指定次数（用的很少)</li>
</ul>
<br/>

<blockquote>
<p>实操</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;item in person&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;item.id&quot;</span>&gt;</span></span><br><span class="line">           &#123;&#123;item.name&#125;&#125; --  &#123;&#123;item.age&#125;&#125;</span><br><span class="line">       <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">       <span class="comment">&lt;!-- 下标写法 - 遍历数组 --&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(item,index) in person&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span></span><br><span class="line">           <span class="comment">&lt;!-- &#123;&#123;item.name&#125;&#125;  --  &#123;&#123;item.age&#125;&#125; --&gt;</span></span><br><span class="line">           &#123;&#123;item.name&#125;&#125;  --  &#123;&#123;item.age&#125;&#125;  --  &#123;&#123;index&#125;&#125;</span><br><span class="line">       <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">       <span class="comment">&lt;!-- 遍历对象 --&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(a,b) in persona&quot;</span>&gt;</span></span><br><span class="line">           &#123;&#123;a&#125;&#125; -- &#123;&#123;b&#125;&#125;</span><br><span class="line">       <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">       <span class="comment">&lt;!-- 遍历字符串 --&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(a,b) in str&quot;</span>&gt;</span></span><br><span class="line">           &#123;&#123;a&#125;&#125; -- &#123;&#123;b&#125;&#125;</span><br><span class="line">       <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">productionTip</span> = <span class="literal">false</span>;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> c= <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">person</span>:[</span></span><br><span class="line"><span class="language-javascript">               &#123;<span class="attr">id</span>:<span class="string">&#x27;001&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;陈一&#x27;</span>,<span class="attr">age</span>:<span class="string">&#x27;18&#x27;</span>&#125;,</span></span><br><span class="line"><span class="language-javascript">               &#123;<span class="attr">id</span>:<span class="string">&#x27;002&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;陈二&#x27;</span>,<span class="attr">age</span>:<span class="string">&#x27;18&#x27;</span>&#125;,</span></span><br><span class="line"><span class="language-javascript">               &#123;<span class="attr">id</span>:<span class="string">&#x27;003&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;陈三&#x27;</span>,<span class="attr">age</span>:<span class="string">&#x27;18&#x27;</span>&#125;,</span></span><br><span class="line"><span class="language-javascript">               &#123;<span class="attr">id</span>:<span class="string">&#x27;004&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;陈四&#x27;</span>,<span class="attr">age</span>:<span class="string">&#x27;18&#x27;</span>&#125;,</span></span><br><span class="line"><span class="language-javascript">               &#123;<span class="attr">id</span>:<span class="string">&#x27;005&#x27;</span>,<span class="attr">name</span>:<span class="string">&#x27;陈五&#x27;</span>,<span class="attr">age</span>:<span class="string">&#x27;18&#x27;</span>&#125;</span></span><br><span class="line"><span class="language-javascript">            ],</span></span><br><span class="line"><span class="language-javascript">           <span class="attr">persona</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">               <span class="attr">name</span>:<span class="string">&#x27;彭&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">               <span class="attr">age</span>:<span class="number">18</span>,</span></span><br><span class="line"><span class="language-javascript">               <span class="attr">adress</span>:<span class="string">&#x27;佛山&#x27;</span></span></span><br><span class="line"><span class="language-javascript">           &#125;,</span></span><br><span class="line"><span class="language-javascript">           <span class="attr">str</span>:<span class="string">&#x27;chenP&#x27;</span></span></span><br><span class="line"><span class="language-javascript">       &#125;,</span></span><br><span class="line"><span class="language-javascript">     &#125;)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<hr>
<h1 id="数据监视"><a href="#数据监视" class="headerlink" title="数据监视"></a>数据监视</h1><ol>
<li><p>vue会监视data中所有层次的数据。</p>
</li>
<li><p>如何监测对象中的数据？</p>
<p>通过<strong style="color:green">setter</strong>实现监视，且要在new Vue时就化入要监测的数据。</p>
</li>
</ol>
<blockquote>
<p>(1),对象中<strong style="color:green">后追加的属性，Vue默认不做响应式处理</strong><br> (2),如需给后添加的属性做<strong style="color:green">响应式</strong>，请使用如下API:<br>              Vue.set(target,propertyName&#x2F;index,value)<br>              vm.$set(target,propertyName&#x2F;index,value)<br>                <strong style="color:green">this.$set(this,对象属性student.hobby,索引0,’新值’)</strong></p>
</blockquote>
<br/>

<ol start="3">
<li>,如何监测数组中的数据？</li>
</ol>
<p>​		通过包裹数组更新元素的方法实现，本质就是做了两件事：</p>
<p>​			(1).调用原生对应的方法对数组进行更新。</p>
<p>​			(2),重新解析模板，进而更新页面。</p>
<br/>

<ol start="4">
<li>在Vue修改数组中的某个元素一定要用如下方法：</li>
</ol>
<ul>
<li>使用这些API:<strong style="color:green">push()加最后、pop()删后、shift()删前、unshift()加前、splice()删除、sort()、reverse()</strong></li>
<li><strong style="color:green">Vue.set()vm.$set()</strong></li>
</ul>
<hr>
<h1 id="收集表单数据-–-model"><a href="#收集表单数据-–-model" class="headerlink" title="收集表单数据 – model"></a>收集表单数据 – <strong style="color:green">model</strong></h1><ul>
<li>若：&lt; input types&#x3D;”text”&#x2F;&gt;,则 v-model 收集的是value值，用户输入的就是value值</li>
<li>若：&lt; input type&#x3D;”radio”&#x2F;&gt;,则v-model收集的是value值，且要给标签置value值。</li>
<li>若：&lt;i nput type&#x3D;:”checkbox”&#x2F;&gt;</li>
</ul>
<blockquote>
<p>1.没有配置input的value&#x2F;属性，那么收集的就是checked(勾选or未勾选，是布尔值)</p>
<p>2.配置input的value属性：</p>
<ul>
<li>​	(1)v-mode1的初始值是非数组，那么收集的就是checked(勾选or未勾选，是布尔值)</li>
<li>​    (2)v-mode1的初始值是数组，那么收集的的就是value组成的数组</li>
</ul>
</blockquote>
<br/>

<blockquote>
<p>备注：v-model的三个修饰符：<br>         <strong style="color:green"> 1azy</strong>:失去焦点再收集数据<br>          <strong style="color:green">number</strong>:输入字符非转为有效的数字<br>         <strong style="color:green"> trim</strong>:输入首尾空格过滤</p>
</blockquote>
<br/>

<p>实操</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">form</span>  @<span class="attr">submit.prevent</span>=<span class="string">&quot;demo&quot;</span>&gt;</span></span><br><span class="line">            <span class="comment">&lt;!-- 点击账号也可以获取焦点 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;demo&quot;</span>&gt;</span>账号：<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">            <span class="comment">&lt;!-- .trim去取前后空格字符 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;&quot;</span> <span class="attr">id</span>=<span class="string">&quot;demo&quot;</span> <span class="attr">v-model.trim</span>=<span class="string">&quot;userInfo.account&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">             密码： <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">name</span>=<span class="string">&quot;&quot;</span> <span class="attr">id</span>=<span class="string">&quot;&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;userInfo.password&quot;</span>&gt;</span></span><br><span class="line">             <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"></span><br><span class="line">             <span class="comment">&lt;!-- .numebr 转为numberl类型 --&gt;</span></span><br><span class="line">             年龄：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;number&quot;</span> <span class="attr">v-model.number</span>=<span class="string">&quot;userInfo.year&quot;</span>&gt;</span></span><br><span class="line">             <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"></span><br><span class="line">             性别：</span><br><span class="line">             男<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;sex&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;userInfo.sex&quot;</span> <span class="attr">value</span>=<span class="string">&quot;男&quot;</span>&gt;</span></span><br><span class="line">             女<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;sex&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;userInfo.sex&quot;</span> <span class="attr">value</span>=<span class="string">&quot;女&quot;</span>&gt;</span></span><br><span class="line">             <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"></span><br><span class="line">             爱好：</span><br><span class="line">             学习<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;userInfo.hobby&quot;</span> <span class="attr">value</span>=<span class="string">&quot;学习&quot;</span>&gt;</span></span><br><span class="line">             电影<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;userInfo.hobby&quot;</span> <span class="attr">value</span>=<span class="string">&quot;电影&quot;</span>&gt;</span></span><br><span class="line">             游戏<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;userInfo.hobby&quot;</span> <span class="attr">value</span>=<span class="string">&quot;游戏&quot;</span>&gt;</span></span><br><span class="line">             <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"></span><br><span class="line">             校区</span><br><span class="line">             <span class="tag">&lt;<span class="name">select</span> <span class="attr">v-model</span>=<span class="string">&quot;userInfo.city&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;&quot;</span>&gt;</span>请选择校区<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;beijing&quot;</span>&gt;</span>北京<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;shanghai&quot;</span>&gt;</span>上海<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;guangzhou&quot;</span>&gt;</span>广州<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;foshan&quot;</span>&gt;</span>佛山<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;zhanjiang&quot;</span>&gt;</span>湛江<span class="tag">&lt;/<span class="name">option</span>&gt;</span>     </span><br><span class="line">            <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"></span><br><span class="line">            其他信息</span><br><span class="line">            <span class="tag">&lt;<span class="name">textarea</span> <span class="attr">v-model</span>=<span class="string">&quot;userInfo.other&quot;</span> &gt;</span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;userInfo.agree&quot;</span>&gt;</span></span><br><span class="line">            阅读同意<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://www.bilibili.com&quot;</span>&gt;</span>《协议》<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="tag">&lt;<span class="name">button</span>&gt;</span>提交<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">el</span>:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">data</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">userInfo</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">account</span>:<span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">password</span>:<span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">year</span>:<span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">sex</span>:<span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">hobby</span>:[],</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">city</span>:<span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">other</span>:<span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">agree</span>:<span class="literal">false</span></span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">demo</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(<span class="variable language_">this</span>.<span class="property">userInfo</span>))</span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;,</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">     </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<hr>
<h1 id="过滤器-–-filters"><a href="#过滤器-–-filters" class="headerlink" title="过滤器 – filters"></a>过滤器 – filters</h1><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 计算属性实现 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>显示格式化后的时间戳         &#123;&#123;fmtTime&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- 方法实现 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>显示格式化后的时间戳        &#123;&#123;getfmTime()&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- 过滤器实现（函数） tiem传值给timeFormater--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>显示格式化后的时间戳        &#123;&#123;time  | timeFormater&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- time传值给timeFormater，timeFormater再传值给mySlice --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>显示格式化后的时间戳        &#123;&#123;time  | timeFormater(&#x27;YYYY-MM-DD&#x27;)  | mySlice&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">     <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root2&quot;</span>&gt;</span></span><br><span class="line">        &#123;&#123;msg&#125;&#125;</span><br><span class="line">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">     <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">         <span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">productionTip</span> = <span class="literal">false</span>;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//全局过滤器</span></span></span><br><span class="line"><span class="language-javascript">        <span class="title class_">Vue</span>.<span class="title function_">filter</span>(<span class="string">&#x27;mySlice&#x27;</span>,<span class="keyword">function</span>(<span class="params">value</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">return</span> value.<span class="title function_">slice</span>(<span class="number">0</span>,<span class="number">4</span>)</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// Vue.filter(&#x27;timeFormater&#x27;,function(value,str=&#x27;YYYY-MM-DD HH:mm:ss&#x27;)&#123;</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//     return value.slice(0,4)</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// &#125;)</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">         <span class="keyword">var</span> c= <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">             <span class="attr">el</span>:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">             <span class="attr">data</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                 <span class="attr">time</span>:<span class="number">1678861519091</span></span></span><br><span class="line"><span class="language-javascript">              &#125;,</span></span><br><span class="line"><span class="language-javascript">              <span class="attr">computed</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">fmtTime</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="keyword">return</span> <span class="title function_">dayjs</span>(<span class="variable language_">this</span>.<span class="property">time</span>).<span class="title function_">format</span>(<span class="string">&#x27;YYYY-MM-DD HH:mm:ss&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">              &#125;,</span></span><br><span class="line"><span class="language-javascript">              <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">getfmTime</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="keyword">return</span> <span class="title function_">dayjs</span>(<span class="variable language_">this</span>.<span class="property">time</span>).<span class="title function_">format</span>(<span class="string">&#x27;YYYY-MM-DD HH:mm:ss&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">              &#125;,</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//   局部过滤器</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//   过滤器--函数--str传值则使用后面的模板输出，否则使用原定的</span></span></span><br><span class="line"><span class="language-javascript">              <span class="attr">filters</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">timeFormater</span>(<span class="params">value,str=<span class="string">&#x27;YYYY-MM-DD HH:mm:ss&#x27;</span></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="keyword">return</span> <span class="title function_">dayjs</span>(value).<span class="title function_">format</span>(str)</span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// mySlice(value)&#123;</span></span></span><br><span class="line"><span class="language-javascript">                <span class="comment">//     return value.slice(0,4)</span></span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">              &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">el</span>:<span class="string">&#x27;#root2&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">data</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">msg</span>:<span class="string">&#x27;chen&#x27;</span></span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;)</span></span><br><span class="line"><span class="language-javascript">     </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<hr>
<h1 id="自定义指令-–-directives"><a href="#自定义指令-–-directives" class="headerlink" title="自定义指令 – directives"></a>自定义指令 – directives</h1><p><strong>定义语法</strong></p>
<ul>
<li><p>局部指令</p>
<p>directives:{指令名：配置对象}       或      directives(指令名：回调函数)</p>
</li>
</ul>
<br/>

<ul>
<li>全局指令</li>
</ul>
<p>​		Vue.directive(指令名，配置对象)     或      Vue,directive(指令名，回训函数)</p>
<br/>

<ul>
<li>配置对象中常用的3个回调</li>
</ul>
<p>​	  (1).bind:指令与元素成功绑定时调用<br>​             (2).inserted:指令所在元素被插入页面时调用.<br>​             (3).update:指令所在模板结构被重新解析时调用</p>
<br/>

<blockquote>
<p>备注：<br>       1.指令定义时不加v-,但使用时要加v-:<br>       2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名.–&gt;</p>
</blockquote>
<br/>

<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">   <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">       <span class="comment">&lt;!-- 需求1：定义一个V-chen指令，和v-text功能类似，但会把绑定的数值放人1©倍。</span></span><br><span class="line"><span class="comment">            需求2：定义一个v-fbind:指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">           <span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-text</span>=<span class="string">&quot;n&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">           <span class="tag">&lt;<span class="name">h2</span>&gt;</span>当前的值为：&#123;&#123;n&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">           <span class="tag">&lt;<span class="name">h2</span>&gt;</span>放大10倍的n值为：<span class="tag">&lt;<span class="name">span</span> <span class="attr">v-chen</span>=<span class="string">&quot;n&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">           <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;add&quot;</span>&gt;</span>增加<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">           <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-fbind:value</span>=<span class="string">&quot;n&quot;</span> <span class="attr">autofocus</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">productionTip</span> = <span class="literal">false</span>;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">var</span> c= <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">el</span>:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">data</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">n</span>:,</span></span><br><span class="line"><span class="language-javascript">                 &#125;,</span></span><br><span class="line"><span class="language-javascript">                 <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                   <span class="title function_">add</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                       <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">n</span>++</span></span><br><span class="line"><span class="language-javascript">                   &#125;</span></span><br><span class="line"><span class="language-javascript">                 &#125;,</span></span><br><span class="line"><span class="language-javascript">                 <span class="comment">//big函数何时会被调用？1，指令与元素成功绑定时（一上来）。2，指令所在的模板被重新解析时。</span></span></span><br><span class="line"><span class="language-javascript">                 <span class="attr">directives</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                   <span class="comment">// element为dom元素（&lt;span&gt;&lt;/span&gt;）</span></span></span><br><span class="line"><span class="language-javascript">                   <span class="comment">// binding--绑定值</span></span></span><br><span class="line"><span class="language-javascript">                   <span class="comment">//有-的写法  &#x27;chen-peng&#x27;(element,binding)&#123;element.innerText=binding.value*10&#125;,</span></span></span><br><span class="line"><span class="language-javascript">                   <span class="title function_">chen</span>(<span class="params">element,binding</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                       element.<span class="property">innerText</span>=binding.<span class="property">value</span>*<span class="number">10</span></span></span><br><span class="line"><span class="language-javascript">                   &#125;,</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">                   <span class="comment">// fbind(element,binding)&#123;  </span></span></span><br><span class="line"><span class="language-javascript">                   <span class="comment">//     element.value=binding.value</span></span></span><br><span class="line"><span class="language-javascript">                   <span class="comment">//     // element.focus()</span></span></span><br><span class="line"><span class="language-javascript">                   <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">                   <span class="attr">fbind</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                       <span class="comment">// 指令与元素成功绑定时(一开始)</span></span></span><br><span class="line"><span class="language-javascript">                       <span class="title function_">bind</span>(<span class="params">element,binding</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                           element.<span class="property">value</span>=binding.<span class="property">value</span></span></span><br><span class="line"><span class="language-javascript">                       &#125;,</span></span><br><span class="line"><span class="language-javascript">                       <span class="comment">//指令所在元素被插入页面时</span></span></span><br><span class="line"><span class="language-javascript">                       <span class="title function_">inserted</span>(<span class="params">element,binding</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                           element.<span class="title function_">focus</span>()</span></span><br><span class="line"><span class="language-javascript">                       &#125;,</span></span><br><span class="line"><span class="language-javascript">                       <span class="comment">// 指令所在的模板被重新解析时</span></span></span><br><span class="line"><span class="language-javascript">                       <span class="title function_">update</span>(<span class="params">element,binding</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                           element.<span class="property">value</span>=binding.<span class="property">value</span></span></span><br><span class="line"><span class="language-javascript">                           <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;update&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">                           <span class="comment">//获取焦点</span></span></span><br><span class="line"><span class="language-javascript">                           element.<span class="title function_">focus</span>()</span></span><br><span class="line"><span class="language-javascript">                       &#125;</span></span><br><span class="line"><span class="language-javascript">                   &#125;</span></span><br><span class="line"><span class="language-javascript">                 &#125;</span></span><br><span class="line"><span class="language-javascript">             &#125;)</span></span><br><span class="line"><span class="language-javascript">        </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<hr>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="http://example.com">辰</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://example.com/2023/04/05/Vue-%E5%9F%BA%E7%A1%80/">http://example.com/2023/04/05/Vue-%E5%9F%BA%E7%A1%80/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://example.com" target="_blank">C·辰</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue/">Vue</a></div><div class="post_share"><div class="social-share" data-image="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/Vue.jpg" data-sites="wechat,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2023/04/02/JavaScript/" title="JavaScript"><img class="cover" src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/page1.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">JavaScript</div></div></a></div><div class="next-post pull-right"><a href="/2023/04/06/Vue-%E7%BB%84%E4%BB%B6%E5%8C%96%E7%BC%96%E7%A8%8B/" title="Vue-组件化编程"><img class="cover" src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/vues.jpeg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue-组件化编程</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2023/04/06/Vue-%E7%BB%84%E4%BB%B6%E5%8C%96%E7%BC%96%E7%A8%8B/" title="Vue-组件化编程"><img class="cover" src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/vues.jpeg" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2023-08-11</div><div class="title">Vue-组件化编程</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog%2Fimages%2Favatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">辰</div><div class="author-info__description">车遥马慢</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">32</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">28</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">10</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://gitee.com/hchenp"><i class="fab fa-github"></i><span>Gitee-HchenP</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://gitee.com/hchenp" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://github.com/Pxlchen?tab=projects" target="_blank" title="CSDN"><i class="fa fa-book-open"></i></a><a class="social-icon" href="https://console.cloud.tencent.com/cos/bucket?bucket=chen-1317386995&amp;region=ap-guangzhou&amp;isPublic=true" target="_blank" title="QQ"><i class="fab fa-qq"></i></a><a class="social-icon" href="mailto:1107383160@qq.com" target="_blank" title="Email"><i class="fas fa-envelope-open-text"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">C2C-Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content is-expand"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E6%8C%87%E4%BB%A4"><span class="toc-number">1.</span> <span class="toc-text">常用指令</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E8%AF%AD%E6%B3%95"><span class="toc-number">2.</span> <span class="toc-text">常用语法</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0"><span class="toc-number">3.</span> <span class="toc-text">常用函数</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AE%9E%E4%BE%8B"><span class="toc-number">4.</span> <span class="toc-text">实例</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%94%9F%E4%BA%A7"><span class="toc-number">5.</span> <span class="toc-text">生产</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">6.</span> <span class="toc-text">生命周期</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#script"><span class="toc-number">7.</span> <span class="toc-text">script</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%94%9F%E4%BA%A7%E6%8F%90%E7%A4%BA"><span class="toc-number">8.</span> <span class="toc-text">生产提示</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E5%AE%9E%E4%BE%8B"><span class="toc-number">9.</span> <span class="toc-text">创建实例</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%80%89%E6%8B%A9%E5%99%A8-%E2%80%93el%E4%B8%A4%E7%A7%8D%E5%86%99%E6%B3%95"><span class="toc-number">10.</span> <span class="toc-text">选择器 –el两种写法</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E5%AD%98%E5%82%A8%E2%80%93data%E4%B8%A4%E7%A7%8D%E5%86%99%E6%B3%95"><span class="toc-number">11.</span> <span class="toc-text">数据存储–data两种写法</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%8F%92%E5%80%BC%E8%AF%AD%E6%B3%95%E5%92%8C%E6%8C%87%E4%BB%A4%E8%AF%AD%E6%B3%95"><span class="toc-number">12.</span> <span class="toc-text">插值语法和指令语法</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E5%B1%82%E7%BA%A7%E2%80%93json%E6%96%B9%E5%BC%8F"><span class="toc-number">13.</span> <span class="toc-text">数据层级–json方式</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A"><span class="toc-number">14.</span> <span class="toc-text">数据绑定</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E4%BB%A3%E7%90%86%E2%80%93Object-defineProperty%E6%96%B9%E6%B3%95"><span class="toc-number">15.</span> <span class="toc-text">数据代理–Object.defineProperty方法</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86-methods-%E2%80%93%E5%AE%9E%E7%8E%B0%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A"><span class="toc-number">16.</span> <span class="toc-text">事件处理(methods)–实现点击事件绑定</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6-click-%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6-x3D-%E2%80%9D-%E2%80%9C"><span class="toc-number">17.</span> <span class="toc-text">事件修饰符-@click.事件修饰符&#x3D;” “</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6"><span class="toc-number">18.</span> <span class="toc-text">键盘事件</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7-%E2%80%93-computed"><span class="toc-number">19.</span> <span class="toc-text">计算属性 – computed</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%9B%91%E8%A7%86%E5%B1%9E%E6%80%A7-%E2%80%93-watch"><span class="toc-number">20.</span> <span class="toc-text">监视属性 – watch</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%99%AE%E9%80%9A%E7%9B%91%E8%A7%86"><span class="toc-number">20.1.</span> <span class="toc-text">普通监视</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B7%B1%E5%BA%A6%E7%9B%91%E8%A7%86"><span class="toc-number">20.2.</span> <span class="toc-text">深度监视</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8A%A8%E6%80%81%E7%B1%BB%E5%90%8D%E5%92%8C%E6%A0%B7%E5%BC%8F"><span class="toc-number">21.</span> <span class="toc-text">动态类名和样式</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93-%E2%80%93-show-x2F-if"><span class="toc-number">22.</span> <span class="toc-text">条件渲染 – show &#x2F; if</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93-%E2%80%93-for"><span class="toc-number">23.</span> <span class="toc-text">列表渲染 – .for</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E7%9B%91%E8%A7%86"><span class="toc-number">24.</span> <span class="toc-text">数据监视</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%94%B6%E9%9B%86%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE-%E2%80%93-model"><span class="toc-number">25.</span> <span class="toc-text">收集表单数据 – model</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%BF%87%E6%BB%A4%E5%99%A8-%E2%80%93-filters"><span class="toc-number">26.</span> <span class="toc-text">过滤器 – filters</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4-%E2%80%93-directives"><span class="toc-number">27.</span> <span class="toc-text">自定义指令 – directives</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2023/07/06/Java%E5%85%AB%E8%82%A1%E6%96%87/" title="Java八股文"><img src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/javaall.gif" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Java八股文"/></a><div class="content"><a class="title" href="/2023/07/06/Java%E5%85%AB%E8%82%A1%E6%96%87/" title="Java八股文">Java八股文</a><time datetime="2023-07-06T14:22:22.000Z" title="发表于 2023-07-06 22:22:22">2023-07-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/07/06/%E5%90%8E%E7%AB%AF%E8%A7%84%E5%88%92/" title="Java后端"><img src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/javahd.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Java后端"/></a><div class="content"><a class="title" href="/2023/07/06/%E5%90%8E%E7%AB%AF%E8%A7%84%E5%88%92/" title="Java后端">Java后端</a><time datetime="2023-07-06T14:22:22.000Z" title="发表于 2023-07-06 22:22:22">2023-07-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/06/02/MybatisPlus/" title="MybatisPlus"><img src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/mybatisplus.svg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="MybatisPlus"/></a><div class="content"><a class="title" href="/2023/06/02/MybatisPlus/" title="MybatisPlus">MybatisPlus</a><time datetime="2023-06-02T14:22:22.000Z" title="发表于 2023-06-02 22:22:22">2023-06-02</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/05/05/Linux/" title="Linux"><img src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/Linux.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Linux"/></a><div class="content"><a class="title" href="/2023/05/05/Linux/" title="Linux">Linux</a><time datetime="2023-05-05T14:22:22.000Z" title="发表于 2023-05-05 22:22:22">2023-05-05</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/05/05/Redis/" title="Redis"><img src= "" data-lazy-src="/img/loading.gif" data-original="ttps://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/Redis.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Redis"/></a><div class="content"><a class="title" href="/2023/05/05/Redis/" title="Redis">Redis</a><time datetime="2023-05-05T14:22:22.000Z" title="发表于 2023-05-05 22:22:22">2023-05-05</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By 辰</div><div class="framework-info"><a target="_blank" rel="noopener" href="https://beian.miit.gov.cn">粤ICP备2023096650号</a><span class="footer-separator">|</span><a target="_blank" rel="noopener" href="http://hchen.cloud">hchen.cloud</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><div class="js-pjax"></div><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/fireworks.min.js"></script><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-fluttering-ribbon.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div class="no-result" id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js"></script></div></div>
        <style>
            [bg-lazy] {
                background-image: none !important;
                background-color: #eee !important;
            }
        </style>
        <script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                preloadRatio: 1,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(r){r.imageLazyLoadSetting.processImages=t;var e=r.imageLazyLoadSetting.isSPA,n=r.imageLazyLoadSetting.preloadRatio||1,c=a();function a(){var t=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")),e=Array.prototype.slice.call(document.querySelectorAll("[bg-lazy]"));return t.concat(e)}function t(){e&&(c=a());for(var t,o=0;o<c.length;o++)0<=(t=(t=c[o]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(r.innerHeight*n||document.documentElement.clientHeight*n)&&function(){var t,e,n,a,i=c[o];e=function(){c=c.filter(function(t){return i!==t}),r.imageLazyLoadSetting.onImageLoaded&&r.imageLazyLoadSetting.onImageLoaded(i)},(t=i).hasAttribute("bg-lazy")?(t.removeAttribute("bg-lazy"),e&&e()):(n=new Image,a=t.getAttribute("data-original"),n.onload=function(){t.src=a,t.removeAttribute("data-original"),e&&e()},t.src!==a&&(n.src=a))}()}function i(){clearTimeout(t.tId),t.tId=setTimeout(t,500)}t(),document.addEventListener("scroll",i),r.addEventListener("resize",i),r.addEventListener("orientationchange",i)}(this);</script></body></html>